<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能图书平台</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: '黑体', Arial, sans-serif;
            background-color: #f6f6f1;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: #dcdad7;
        }

        header img {
            height: 40px;
        }

        nav {
            display: flex;
            align-items: center;
        }

        nav button {
            background-color: #3f51b5; /* 设置背景色为透明 */
            border: none;
            color: white; /* 设置字体颜色为白色 */
            font-size: 14px;
            margin-left: 10px;
            padding: 10px 5px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            transition: color 0.3s, background-color 0.3s; /* 添加颜色过渡效果 */
        }

        nav button:hover {
            background-color: #2c3e8f;
            color: white; /* 鼠标移动上去时字体颜色变为蓝色 */
        }

        .container {
            display: flex;
            flex-wrap: wrap; /* 添加此属性以允许容器内元素换行 */
            padding: 20px;
        }

        .hot-list {
            width: 300px;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .hot-list h3 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }

        .hot-list table {
            width: 100%;
            font-size: 16px;
            text-align: left;
            border-collapse: collapse;
        }

        .hot-list th {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }

        .hot-list td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }

        .intro-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .search-box {
            display: flex;
            align-items: center;
        }

        .search-box input[type="text"] {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            outline: none;
            width: 200px;
        }

        .search-box button {
            background-color: #3f51b5;
            border: none;
            color: white;
            font-size: 14px;
            margin-left: 10px;
            padding: 6px 12px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s;
        }

        .search-box button:hover {
            background-color: #2c3e8f;
        }

        .book-intro {
            flex-grow: 1;
            flex-basis: calc(100% - 440px); /* 设置基础宽度，减去左侧热门榜单的宽度（包括20px的间距） */
            margin-left: 20px;
        }

        .book-intro h2 {
            font-size: 40px;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }

        .book-grid {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
        }

        .book-card {
            width: calc(20% - 10px); /* 缩小宽度并增加间距 */
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            margin-right: 52px; /* 增加右边距 */
        }


        .book-card h4 {
            font-size: 18px;
            margin: 5px 0;
            color: #333;
        }

        .book-card h5 {
            font-size: 16px;
            margin: 5px 0;
            color: #666;
        }

        .book-card p {
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
            color: #888;
        }

        .pagination {
            float: right;
        }

        .jieyue_book {
            background-color: #3f51b5;
            border: none;
            color: white; /* 设置字体颜色为白色 */
            font-size: 12px;
            margin-top: 5px;
            margin-left: auto;
            padding: 5px 5px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            transition: color 0.3s, background-color 0.3s; /* 添加颜色过渡效果 */
        }

        .jieyue_book:hover {
            background-color: #2c3e8f;
        }

        .page_ud {
            padding: 2px 2px;
            color: white; /* 设置字体颜色为白色 */
            background-color: #3f51b5;
            border-radius: 5px;
            transition: color 0.3s, background-color 0.3s; /* 添加颜色过渡效果 */
        }

        .ai-button {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            background-color: #3f51b5;
            color: white;
            font-size: 18px;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s;
            position: fixed;
            bottom: 20px;
            left: 20px;
        }

        .ai-button:hover {
            color: white;
            background-color: #303f9f;
            text-decoration: none;
        }

    </style>
</head>
<body>
<a href="http://localhost:80" class="ai-button">AI</a>
<header>
    <div class="logo">
        <img src="static/your-logo-url.png" alt="Logo">
    </div>
    <nav>
        <div>
            {% if message == '无该书籍信息请查找其他书籍'%}
            <div id="message" hidden="true">{{message}}</div>
            {% endif %}
            <script>
                const message = document.getElementById('message').innerHTML
                alert(message)


            </script>
            <div class="admin-info">
                用户:({{username }})
                <button onclick="window.location.href='{{ url_for('user_return_book',username=username,value=value) }}'">
                    用户借阅信息
                </button>
                <button onclick="window.location.href='{{ url_for('logout') }}'">注销</button>
            </div>
        </div>
    </nav>

</header>
<div class="container">
    <div class="hot-list">
        <h3>本周热门榜单</h3>
        <table>
            <thead>
            <tr>
                <th>名<br/>次</th>
                <th>书<br/>名</th>
                <th>推荐<br/>指数</th>
            </tr>
            </thead>
            <tbody>
            <!-- 以下部分可以根据需要复制粘贴以添加更多书籍 -->
            <tr>
                <td>1.</td>
                <td>钢铁是怎样炼成的</td>
                <td>10</td>
            </tr>
            <tr>
                <td>2.</td>
                <td>红楼梦</td>
                <td>9.8</td>
            </tr>
            <tr>
                <td>3.</td>
                <td>百年孤独</td>
                <td>9.6</td>
            </tr>
            <tr>
                <td>4.</td>
                <td>追风筝的人</td>
                <td>9.4</td>
            </tr>
            <tr>
                <td>5.</td>
                <td>活着</td>
                <td>9.2</td>
            </tr>
            <tr>
                <td>6.</td>
                <td>1984</td>
                <td>9.0</td>
            </tr>
            <tr>
                <td>7.</td>
                <td>哈姆雷特</td>
                <td>8.8</td>
            </tr>
            <tr>
                <td>8.</td>
                <td>围城</td>
                <td>8.6</td>
            </tr>
            <tr>
                <td>9.</td>
                <td>安徒生童话</td>
                <td>8.4</td>
            </tr>
            <tr>
                <td>10.</td>
                <td>人类简史</td>
                <td>8.2</td>
            </tr>
            <tr>
                <td>11.</td>
                <td>平凡的世界</td>
                <td>8.0</td>
            </tr>
            <tr>
                <td>12.</td>
                <td>福尔摩斯探案集</td>
                <td>7.8</td>
            </tr>
            <tr>
                <td>13.</td>
                <td>月亮与六便士</td>
                <td>7.6</td>
            </tr>
            <tr>
                <td>14.</td>
                <td>悲惨世界</td>
                <td>7.4</td>
            </tr>
            <tr>
                <td>15.</td>
                <td>查令十字街84号</td>
                <td>7.2</td>
            </tr>
            <tr>
                <td>16.</td>
                <td>射雕英雄传</td>
                <td>7.0</td>
            </tr>
            <tr>
                <td>17.</td>
                <td>霍乱时期的爱情</td>
                <td>6.8</td>
            </tr>
            <tr>
                <td>18.</td>
                <td>三体</td>
                <td>6.6</td>
            </tr>
            <tr>
                <td>19.</td>
                <td>飘</td>
                <td>6.4</td>
            </tr>
            <tr>
                <td>20.</td>
                <td>局外人</td>
                <td>6.2</td>
            </tr>

            <!-- 书籍结束 -->
            </tbody>
        </table>
    </div>
    <div class="book-intro">
        <h2>图书简介</h2>
        <div class="intro-header">
            <div class="search-box">
                <form action="{{ url_for('search_book', book_name=book_name,username=username,value=value) }}" method="post">
                    书名<input type="text" name="book_name" id="book_name" placeholder="无书籍">
                    <button type="submit">查找图书</button>
                </form>
            </div>
        </div>

        <div class="book-grid">
            <!-- 以下部分可以根据需要复制粘贴以添加更多图书卡片 -->
            {% for book in books%}
            <div class="book-card">
                <img src="{{book.img_url}}" alt="加载失败">
                <h4>{{book.title}}</h4>
                <h5>{{book.author}}</h5>
                <h6>{{book.state}}</h6>
                <p>{{book.book_img_message}}</p>

                {% if book.state == "未借阅" %}
                <form action="{{ url_for('user_state', id=book.id,value=value,username=username) }}" method="post">
                    <button class="jieyue_book" type="submit" id="borrow{{book.id}}">借阅图书</button>
                </form>
                <script>
                    function showAlert() {
                        alert('借阅成功！');
                    }

                    document.addEventListener('DOMContentLoaded', function () {
                        const button = document.querySelector('#borrow{{book.id}}');
                        button.addEventListener('click', showAlert);
                    });


                </script>
                {% endif %}
            </div>
            {% endfor %}

        </div>
        <div class="pagination">
            {% if page_num > 1 %}
            <button class="page_ud"
                    onclick="window.location.href='{{ url_for('index_user', page_num=page_num-1 , value=value ,username = username ) }}'">
                上一页
            </button>
            {% endif %}
            {% for i in range(1, (total//per_page)+2) %}
            {% if i == page_num %}
            <span>{{ i }}</span>
            {% else %}
            <button onclick="window.location.href='{{ url_for('index_user', page_num=i ,value=value , username = username) }}'">
                {{ i }}
            </button>
            {% endif %}
            {% endfor %}
            {% if page_num < (total//per_page)+1 %}
            <button class="page_ud"
                    onclick="window.location.href='{{ url_for('index_user', page_num=page_num+1,value=value , username = username) }}'">
                下一页
            </button>
            {% endif %}
        </div>
    </div>
</div>
</body>
</html>
